import React, { useState, useEffect } from "react";
import { View, StyleSheet, Dimensions, Image, Text } from "react-native";
import { useSelector } from "react-redux";
import IconNavBar from '@/components/IconNavBar'
import { PayWithArray } from '@/config/config'
import { sectokenCommonCenterProps } from '@/config/navigatorProps'
import moment from "moment";

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const SectokenSendCreationDetail = (props) => {

    const transcationDetail = useSelector((state) => state.sectokenMainReducer.transcationDetail || {});
    const selectedSafeWallet = useSelector((state) => state.sectokenMainReducer.selectedSafeWallet || {});
    const [creator, setCreator] = useState({});

    useEffect(() => {
        if (transcationDetail && transcationDetail.id) {
            let list = selectedSafeWallet?.ownerList
            let obj = {
                profileImg: 'profile_logo3',
                address: transcationDetail.txInfo.creator.value,
                label: ''
            }
            list && list.forEach(item => {
                if (item.address?.toLowerCase() === transcationDetail.txInfo.creator.value?.toLowerCase()) {
                    obj = item
                }
            });
            setCreator(obj)
        }

    }, [transcationDetail]);

    const handlePressLeft = () => {
        props.navigation.goBack()
    }

    return (
        <View style={styles.container}>
            <IconNavBar {...props} {...sectokenCommonCenterProps} {...{ title: 'Transaction Details' }} handlePressLeft={handlePressLeft} />
            <View style={styles.bodyContent}>
                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                    <Image source={require('@/assets/safe/setting.png')} style={{ width: 12 * ratio, height: 12 * ratio, marginLeft: 15 * ratio }} />
                    <Text style={styles.title1}>Safe created</Text>
                    <Text style={{ ...styles.title1, fontWeight: '600', color: '#0069F6' }}>Success</Text>
                </View>
                <Text style={{ ...styles.title1, marginLeft: 15 * ratio, marginTop: 24 * ratio }}>Transaction hash</Text>
                <Text style={{ ...styles.title1, marginLeft: 15 * ratio, width: 301 * ratio, color: '#898989', marginTop: 10 * ratio }}>
                    {transcationDetail.txInfo.transactionHash}
                </Text>
                <View style={{ marginTop: 26 * ratio }}>
                    <Text style={{ ...styles.title1, marginLeft: 15 * ratio }}>Creator address</Text>
                    <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 15 * ratio, marginTop: 9 * ratio }}>
                        <Image source={PayWithArray[creator.profileImg]} style={{ width: 30 * ratio, height: 30 * ratio }} />
                        <View style={{ marginLeft: 9 * ratio, justifyContent: 'center' }}>
                            <Text style={styles.title1}>{creator.label}</Text>
                            <Text ellipsizeMode="middle" numberOfLines={1}
                                style={{ ...styles.title1, color: '#767B7D', width: 95 * ratio }}>
                                {creator.address}
                            </Text>
                        </View>
                    </View>
                </View>
                <View style={{ marginTop: 26 * ratio }}>
                    <Text style={{ ...styles.title1, marginLeft: 15 * ratio }}>Mastercopy used</Text>
                    <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 15 * ratio, marginTop: 9 * ratio }}>
                        <Image source={PayWithArray[creator.profileImg]} style={{ width: 30 * ratio, height: 30 * ratio }} />
                        <View style={{ marginLeft: 9 * ratio, justifyContent: 'center' }}>
                            <Text style={styles.title1}>Unknown</Text>
                            <Text ellipsizeMode="middle" numberOfLines={1}
                                style={{ ...styles.title1, color: '#767B7D', width: 95 * ratio }}>
                                {transcationDetail.txInfo.implementation.value}
                            </Text>
                        </View>
                    </View>
                </View>
                <View style={{ marginTop: 26 * ratio }}>
                    <Text style={{ ...styles.title1, marginLeft: 15 * ratio }}>Factory used</Text>
                    <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 15 * ratio, marginTop: 9 * ratio }}>
                        <Image source={PayWithArray[creator.profileImg]} style={{ width: 30 * ratio, height: 30 * ratio }} />
                        <View style={{ marginLeft: 9 * ratio, justifyContent: 'center' }}>
                            <Text
                                style={{ ...styles.title1, color: '#767B7D', width: 213 * ratio }}>
                                {transcationDetail.txInfo.factory.value}
                            </Text>
                        </View>
                    </View>
                </View>
                <View style={{ marginTop: 29 * ratio }}>
                    <Text style={styles.title2}>
                        Created:
                    </Text>
                    <Text style={{ ...styles.title2, fontWeight: '400', color: '#535353' }}>
                        {moment(transcationDetail.timestamp).format('MMM DD, YYYY [at] HH:mm:ss')}
                    </Text>
                </View>
            </View >
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFFFFF'
    },
    bodyContent: {
        flex: 1,
        marginTop: 13 * ratio
    },
    title1: {
        fontSize: 14,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#2C2C2C',
        lineHeight: 21,
        marginLeft: 10 * ratio
    },
    title2: {
        fontSize: 16,
        fontFamily: 'SourceHanSansCN-Medium, SourceHanSansCN',
        fontWeight: '500',
        color: '#2C2C2C',
        lineHeight: 24,
        marginLeft: 15 * ratio
    }
})
export default SectokenSendCreationDetail